<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>方框</title>
<style>
body,ul{margin:0; padding:0;}
li{list-style:none;}
.clear{zoom}
.clear:after{content:""; display:block; clear:both;}
.box{width:500px; height:400px; border:10px solid #cccccc; margin:30px auto;}
.left{width:200px; height:400px; background:#77aa11; float:left;}
.right{height:400px; float:left;}/* 宽度可以不写 */
.rightTop{height:80px; background:#ff9900;}/* 宽度可以不写 */
.rightMiddle1{width:150px; height:160px; background:#44ffcc; float:right;}
.rightMiddle2{width:150px; height:160px; background:#ff6699;}
.rightBottom{width:300px; height:160px; background:#336699;}
</style>
</head>

<body>
  <div class="box clear">
    <div class="left">1</div>
    <ul class="right">
      <li class="rightTop">2</li>
      <li class="rightMiddle1">3</li>
      <li class="rightMiddle2">4</li>
      <li class="rightBottom">5</li>
    </ul>
  </div>
</body>
</html>
